<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 94692
  Date: 2020/9/30
  Time: 9:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>考勤管理</title>

    <!--data table-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/data-tables/DT_bootstrap.css"/>

    <link href="${pageContext.request.contextPath}/static/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/style-responsive.css" rel="stylesheet">

</head>

<body class="sticky-header" style="background: #e4e7ea">

<!--body wrapper start-->
<div class="wrapper">
    <div class="row">
        <div class="col-sm-12">
            <section class="panel">
                <header class="panel-heading">
                    考勤管理
                    <span class="tools pull-right">
                        <a href="javascript:;" class="fa fa-chevron-down"></a>
                        <a href="javascript:;" class="fa fa-times"></a>
                     </span>
                </header>
                <div class="panel-body">
                    <div class="adv-table editable-table ">
                        <div class="clearfix">
                            <div class="btn-group">

                            </div>

                            <div style="float: right">
                                <input type="text" id="attendMessage" placeholder="请输入你想要查的"/>
                                <button class="button" onclick="queryRoomByAddress()">查询</button>
                            </div>

                            <%--<div class="btn-group pull-right">
                                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">工具 <i
                                        class="fa fa-angle-down"></i>
                                </button>
                                <ul class="dropdown-menu pull-right">
                                    <li><a href="#">工具一</a></li>
                                    <li><a href="#">工具二</a></li>
                                    <li><a href="#">工具三</a></li>
                                </ul>

                            </div>--%>
                        </div>
                        <div style="height: 30px"></div>
                        <table class="table table-striped table-hover table-bordered">
                            <thead>
                            <tr>
                                <th>姓名</th>
                                <th>班级</th>
                                <th>时间</th>
                                <th>记录原因</th>
                                <%--<th>删除记录</th>--%>
                            </tr>
                            </thead>
                            <tbody id="tb1">

                            </tbody>
                        </table>

                        <%--分页区域--%>
                        <div class="margin">
                            每一页显示<select id="pageSizeSelect" onchange="onSelectChange()">
                            <option value="5" selected="selected">5</option>
                            <option value="10">10</option>
                            <option value="20">20</option>
                        </select>条数据，当前是第<span id="currentPageSpan"></span> 页，
                            总共<span id="totalPageSpan"></span> 页
                            <button class="button" onclick="firstPage()">首页</button>
                            <button class="button" onclick="prePage()">上一页</button>
                            <button class="button" onclick="nextPage()">下一页</button>
                            <button class="button" onclick="lastPage()">尾页</button>
                        </div>
                        <%--分页结束--%>

                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
<!--body wrapper end-->

<!--   模态框   -->
<div class="modal" id="editModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>学生缺勤记录</h4>
            </div>
            <div class="modal-body">
                <label class="control-label">学生id</label>
                <input class="form-control" type="text" id="studentIdInput" placeholder="请输入用户姓名">
                <label class="control-label">记录原因</label>
                <select id="stateSelect" class="form-control">
                    <option value="1">旷课</option>
                    <option value="2">迟到</option>
                    <option value="3">早退</option>
                    <option value="4">请假</option>
                </select>

                <input type="hidden" id="attendanceIdInput">
            </div>
            <div class="modal-footer">
                <button class="button" onclick="showEmpty()" data-dismiss="modal">取消</button>
                <button class="button" onclick="editConfirm()">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- 模态框结束 -->

<!-- Placed js at the end of the document so the pages load faster -->
<script src="${pageContext.request.contextPath}/static/js/jquery-1.10.2.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery-migrate-1.2.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/modernizr.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery.nicescroll.js"></script>

<!--data table-->
<script type="text/javascript"
        src="${pageContext.request.contextPath}/static/js/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/data-tables/DT_bootstrap.js"></script>

<!--common scripts for all pages-->
<script src="${pageContext.request.contextPath}/static/js/scripts.js"></script>

<!--script for editable table-->
<script src="${pageContext.request.contextPath}/static/js/editable-table.js"></script>

<!-- END JAVASCRIPTS -->
<script>
    jQuery(document).ready(function () {
        EditableTable.init();
    });
    $(function () {
        loadListByPage();
    })

    //当前页码
    var currentPage = 1;
    //每页的记录个数
    var pageSize = 5;
    //总共有多少页
    var totalPage;
    $(function () {
        // loadList();
        loadListByPage();
    })

    //用户修改的每页的记录数
    function onSelectChange() {
        pageSize = $("#pageSizeSelect").val();
        currentPage = 1;
        loadListByPage();
    }

    //首页的回调方法
    function firstPage() {
        currentPage = 1;
        loadListByPage();
    }

    //上一页的回调方法
    function prePage() {
        currentPage--;
        if (currentPage < 1) {
            currentPage = 1;
        }
        loadListByPage();
    }

    //下一页的回调方法
    function nextPage() {
        currentPage++;
        if (currentPage > totalPage) {
            currentPage = totalPage;
        }
        loadListByPage();
    }

    //尾页回调方法
    function lastPage() {
        currentPage = totalPage;
        loadListByPage();
    }

    function loadListByPage() {
        //刷新页面后都是显示第一页
        $.ajax({
            url: "${pageContext.request.contextPath}/attendance/getAttendanceKuKeList",
            type: 'get',
            dataType: 'json',
            data: {
                "currentPage": currentPage,
                "pageSize": pageSize
            },
            success: function (result) {
                if (result.code == 0) {
                    //console.log(result.attendanceList[1].addTime);
                    showList(result.attendanceList);
                    totalPage = result.totalPage;
                    $("#totalPageSpan").html(totalPage);
                    $("#currentPageSpan").html(currentPage);
                }
            },
            error: function (err) {
                alert(JSON.stringify(err));
            }
        })
    }

    function showList(attendanceList) {
        var html = '';
        //遍历subjectList数组
        for (var i = 0; i < attendanceList.length; i++) {
            //拿到一个课程信息
            var item = attendanceList[i];
            html += "<tr class=''>";
            html += "<td>" + item.studentName + "</td>";//显示课程的名字
            html += "<td>" + item.className + "</td>";
            html += "<td>" + item.addTime + "</td>";
            if (item.state == 1) {
                html += "<td>旷课</td>";
            } else if (item.state == 2) {
                html += "<td>迟到</td>";
            } else if (item.state == 3) {
                html += "<td>早退</td>";
            } else if (item.state == 4) {
                html += "<td>请假</td>";
            }
            html += "</tr>";
        }
        $("#tb1").html(html);
    }

    function addAttendance() {
        $("#editModal").modal("show");
    }

    function editConfirm() {
        var studentIdValue = $("#studentIdInput").val();
        var stateValue = $("#stateSelect").val();
        var myDate = new Date();
        //console.log(myDate);
        var dataValue = {
            addTime: myDate,
            studentId: studentIdValue,
            state: stateValue
        };
        var classroomString = JSON.stringify(dataValue);
        $.ajax({
            url: "${pageContext.request.contextPath}/attendance/addAttendance",
            type: 'post',
            contentType: 'application/json',
            data: classroomString,//传递用户编辑后的信息
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    //再次分页加载数据并显示在页面上
                    $("#editModal").modal("hide");//关闭模态框
                    loadListByPage();
                }
            },
            error: function (err) {
                alert(JSON.stringify(err));
            }
        })
    }

    function showEmpty() {

    }

    function queryRoomByAddress() {
        var message = $("#attendMessage").val();
        if(message=="旷课"){
            message=1;
        }else if(message=="迟到"){
            message=2;
        }else if(message=="早退"){
            message=3;
        }else if(message=="请假"){
            message=4;
        }
        $.ajax({
            url: "${pageContext.request.contextPath}/attendance/queryAttendByMessage",
            type: 'get',
            contentType: 'application/x-www-form-urlencoded',//指明是个表单提交
            data: {"attendMessage": message},
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    showList(result.attendList);
                } else {
                    alert(JSON.stringify(result.message));
                }
            },
            error: function (err) {
                alert(JSON.stringify(err));
            }
        })
    }
</script>

</body>
</html>